<template>
  <a target="_blank" href="#">
    <div class="vcd">
      <div  class="cover">
        <div class="b-img">
          <img :src="require('/src/assets/img/video-cover.jpg')" alt="">
        </div>
      </div>
      <!--标题部分-->
      <div class="info">
        <p class="title" title="原画，启动！！（学好原画宅家接单赚钱~）">原画，启动！！（学好原画宅家接单赚钱~）</p>
        <p class="desc">
          <span class="iconfont icon-guanggao" style="width: 26px;height: 16px"></span>
          <span>帮帮我！原画老师</span>
        </p>
      </div>
    </div>
  </a>

</template>

<script>
export default {
  name: "advertiseBox",
  date(){

  },
  created() {
  },
  methods :{

  }
}
</script>

<style scoped>
.vcd {
  margin: 20px 0;
  box-sizing: border-box;
  display: flex;
}
.cover{
  margin-right: 10px;
  border-radius: 6px;
  width: 141px;
  height: 80px;
  background: #C9CCD0;
  flex: 0 0 auto;
}
.b-img{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 6px !important;
  overflow: hidden;
}
.b-img img{
  width: 141px;
  height: 80px;
}
.info {
  font-size: 12px;
  line-height: 16px;
  flex: 1;
}
.title {
  font-size: 14px;
  line-height: 20px;
  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
  margin-bottom: 6px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-break: break-word;
  -webkit-line-clamp: 2;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}
.desc {
  color: #9499A0;
  letter-spacing: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-break: break-word;
  -webkit-line-clamp: 1;
  line-height: 16px;
  display: flex;
  align-items: center;
}
</style>
